<template>
	<div>
		<el-row>
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-lx-news"></i> 药品管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</el-row>
		<el-card style="width: 100%">
			<el-table
					:data="tableData"
					border
					style="width: 100%">
				<el-table-column
						prop="id"
						label="id"
						style="text-align: center"
						width="50">
				</el-table-column>
				<el-table-column
						prop="name"
						label="药品名称/用途"
						width="550">
				</el-table-column>
				<el-table-column
						prop="price"
						label="价格/元"
						width="80">
				</el-table-column>
				<el-table-column
						prop="url"
						label="购买地址"
						width="270">
				</el-table-column>
				<el-table-column
						prop="shopId"
						label="商店ID"
						width="65">
				</el-table-column>
				<el-table-column
						fixed="right"
						label="操作"
						width="120">
					<template slot-scope="scope">
						<el-button v-on:click="edit(scope.row)" type="text" size="small">编辑</el-button>
						<el-button v-on:click="deleteIt(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
					background
					style="margin: 10px auto 0; text-align: center"
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					@current-change="page">
			</el-pagination>
		</el-card>
	</div>

</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                tableData: [],
                multipleSelection: [],
                pageSize: 1,
                total: 1000
            }
        },
        created () {
            const _this = this
            this.$http
                .get('/drugs/findAll/0/10')
                .then(function (resp) {
                    console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
        },
        methods: {
            //删除
            deleteIt (row) {
                this.$confirm('此操作将永久删除该药品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        const _this = this;
                        this.$http
                            .delete('/news/deleteById/' + row.id).then(function (resp) {
                            _this.$alert('成功删除！！药品：'+row.name , '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.reload()
                                }
                            })
                        })
                    }
                ).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 编辑
            edit (row) {
                /* this.$router.push({
					 path: '/update',
					 query: {
					 id: row.id
				 }
			 })*/
                alert('还没完善好，请试试其他功能')
                console.log(row);
            },
            //绑定当前页数
            page (currentPage) {
                const _this = this
                this.$http.get('/drugs/findAll/' + (currentPage - 1) + '/10')
                    .then(function (resp) {
                        console.log(resp)
                        _this.tableData = resp.data.content
                        _this.pageSize = resp.data.size
                        _this.total = resp.data.totalElements
                    })
            }
        }
    }
</script>